<template>
  <view class="slider-container">
    <slider
      :min="min"
      :max="max"
      :step="interval"
      :value="Number(value) || 0"
      @change="onChange"
      show-value
      active-color="#F26A77"
      block-color="#F26A77"
      backgroundColor="#e9e9e9"
      class="slider"
    />
  </view>
</template>

<script>
export default {
  name: "QuestionSlider",
  props: {
    min: {
      type: Number,
      required: true
    },
    max: {
      type: Number,
      required: true
    },
    interval: {
      type: Number,
      default: 1
    },
    value: {
      type: [String, Number],
      default: ""
    }
  },
  emits: ["input"],
  methods: {
    onChange(e) {
      this.$emit("input", e.detail.value.toString());
    }
  }
};
</script>

<style scoped>
.slider-container {
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.slider {
  margin: 10rpx 0;
}
</style>
